<template>
    <div>
        <div demo-bg>
            <dv-border-box8 :dur="5" style="height:19em;">
                <div dv-bg>
                    <div class="lis">
                        <li>·</li>
                        <p>销量排行榜</p>
                    </div>
                    <div class="box2" ref="divs"></div>
                </div>
            </dv-border-box8>
        </div>

    </div>
</template>

<script setup lang="ts">
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
let divs = ref()
let option = {
    //你的代码
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        confine: true
    },
    grid: {
        left: '2%',
        right: '4%',
        bottom: '14%',
        top: '16%',
        containLabel: true
    },
    legend: {
        data: ['计划投资额(万元)', '实际投资额(万元)'],
        // right: ,
        bottom: 2,
        textStyle: {
            color: "#333333"
        },
        itemWidth: 15,
        itemHeight: 10,
        itemGap: 35
    },
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6'],
        axisLine: {
            show: false,
            lineStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            // interval: 0,
            // rotate: 40,
            show: true,
            textStyle: {
                fontFamily: 'Microsoft YaHei',
                color: '#fff'
            }
        },
    },

    yAxis: {
        name: '单位：万元',
        nameTextStyle: {
            fontSize: 10
        },
        type: 'value',
        //max:'5000',
        axisLine: {
            show: false,

            lineStyle: {
                color: '#fff',
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: '#ECECEC'
            }
        },
        axisLabel: {
            textStyle: {
                fontFamily: 'Microsoft YaHei',
                fontSize: 10,
            }
        }
    },
    series: [{
        name: '计划投资额(万元)',
        type: 'bar',
        barWidth: '28%',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#7E7CEB'
                }, {
                    offset: 1,
                    color: '#79C7F3'
                }]),
                barBorderRadius: 12,
            },
        },
        data: [3000, 3000, 2000, 1500,2000, 1500]
    },

    {
        name: '实际投资额(万元)',
        type: 'bar',
        barWidth: '28%',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#F98563'
                }, {
                    offset: 1,
                    color: '#FBAC69'
                }]),
                barBorderRadius: 11,
            }
        },
        data: [3200, 1000, 2500, 1000, 1000, 2500]
    }]
};
onMounted(() => {
    let myChart = echarts.init(divs.value);
    // 绘制图表
    myChart.setOption(option);
})
</script>

<style scoped lang="scss">
.div {
    height: 500px;

    .lis {
        display: flex;
        align-items: center;
        border-bottom: rgb(32, 124, 181) solid 1px;

        li {
            text-shadow: 0 0 7px rgb(191, 255, 254);
            margin-left: 20px;
            color: #18C7F2;
            font-size: 70px;
            list-style: none;
            line-height: 50px;
            padding-right: 10px;
            padding-bottom: 10px;
        }

        p {
            font-size: 20px;
        }
    }

    .box2 {
        height: 240px;
        width: 100%;
    }


}
</style>